<template>
	<view class="container">
		<view class="topName">
			{{ room.room_address }}
		</view>
		<view class="formBox">
			<uni-forms ref="form" :modelValue="form">
				<view class="box">
					<view class="formTitle">业主信息</view>
					<uni-forms-item required label="姓名" name="owner_name">
						<uni-easyinput type="text" v-model="form.owner_name" :clearable="false" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item required label="手机号" name="owner_mobile">
						<uni-easyinput type="number" v-model="form.owner_mobile" :clearable="false" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="证件号" name="id_card">
						<uni-easyinput type="idcard" v-model="form.id_card" :clearable="false" placeholder="请输入证件号" />
					</uni-forms-item>
				</view>
				<view class="box">
					<view class="formTitle">合约周期</view>
					<uni-data-checkbox mode="tag" v-model="timeRanges" :localdata="timeList" @change="rangeChange"></uni-data-checkbox>
					<uni-forms-item required label="开始时间" name="contract_start_date">
						<picker mode="date" @change="bindTimeStart" :value="form.contract_start_date">
							<view class="picker-input">
								{{ form.contract_start_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="结束时间" name="contract_end_date">
						<picker mode="date" @change="bindTimeEnd" :value="form.contract_end_date">
							<view class="picker-input">
								{{ form.contract_end_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="box">
					<view class="formTitle">付款信息</view>
					<uni-forms-item label="月租金" name="rent_price">
						<uni-easyinput type="digit" v-model="form.rent_price" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="押金" name="deposit_money">
						<uni-easyinput type="digit" v-model="form.deposit_money" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="付款方式" name="pay_months">
						<picker @change="bindPickerChange" :value="form.pay_months" :range="monthway" range-key="label">
							<view class="picker-input">
								{{ pay_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="收款银行" name="bank_name">
						<uni-easyinput type="text" v-model="form.bank_name" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="收款账号" name="bank_account">
						<uni-easyinput type="number" v-model="form.bank_account" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
				</view>
				<view class="btns">
					<button v-if="type == 'add'" class="btn" type="primary" @click="addOwner">确定</button>
					<button v-else-if="type == 'edit'" class="btn" type="primary" @click="editOwner">确定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
import { isPhone } from '@/utils/validate';
export default {
	data() {
		return {
			type: 'edit',
			owner_id: null,
			room_id: null,
			timeRanges: null,
			pay_name: '一次性',
			room: {},
			form: {
				owner_name: '',
				owner_mobile: '',
				id_card: '',
				contract_start_date: '',
				contract_end_date: '',
				rent_price: null,
				pay_months: 0,
				deposit_money: null,
				bank_name: '',
				bank_account: ''
			},
			rules: {
				owner_name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写姓名'
						}
					],
					validateTrigger: 'submit'
				},
				owner_mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请填写手机号'
						},
						{
							validateFunction: function (rule, value, data, callback) {
								if (!isPhone(value)) {
									callback('请输入正确的手机号');
								}
								return true;
							}
						}
					],
					validateTrigger: 'submit'
				},
				contract_start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开始时间'
						}
					],
					validateTrigger: 'submit'
				},
				contract_end_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择结束时间'
						}
					],
					validateTrigger: 'submit'
				}
			},
			monthway: [
				{
					value: 1,
					label: '每1月'
				},
				{
					value: 2,
					label: '每2月'
				},
				{
					value: 3,
					label: '每3月'
				},
				{
					value: 4,
					label: '每4月'
				},
				{
					value: 6,
					label: '每6月'
				},
				{
					value: 12,
					label: '每1年'
				},
				{
					value: 0,
					label: '一次性'
				}
			],
			timeList: [
				{
					text: '1年',
					value: 1
				},
				{
					text: '2年',
					value: 2
				},
				{
					text: '3年',
					value: 3
				},
				{
					text: '5年',
					value: 5
				}
			]
		};
	},
	onLoad(e) {
		this.owner_id = e.id;
		this.room_id = e.room;
		this.type = e.type;
		if (this.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '业主信息'
			});
			this.getDetail();
		} else if (this.type == 'add') {
			uni.setNavigationBarTitle({
				title: '新增业主'
			});
			this.form.contract_start_date = this.dayjs().format('YYYY-MM-DD');
		}
	},
	onShow() {
		this.getRoomDetail();
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		bindTimeStart(e) {
			this.form.contract_start_date = e.detail.value;
			this.timeRanges = null;
		},
		bindTimeEnd(e) {
			this.form.contract_end_date = e.detail.value;
			this.timeRanges = null;
		},
		bindPickerChange(e) {
			this.pay_name = this.monthway[e.detail.value].label;
			this.form.pay_months = this.monthway[e.detail.value].value;
		},
		rangeChange(e) {
			this.form.contract_end_date = this.dayjs(this.form.contract_start_date).add(e.detail.value, 'y').format('YYYY-MM-DD');
		},
		editOwner() {
			this.$refs.form.validate().then((res) => {
				let data = this.form;
				data.owner_id = this.owner_id;
				api.ownerEdit(data).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '修改成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '无信息更改',
							icon: 'none'
						});
					}
				});
			});
		},
		addOwner() {
			this.$refs.form.validate().then((res) => {
				let data = this.form;
				data.room_id = this.room_id;
				api.ownerAdd(data).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '新增成功'
						});
						setTimeout(() => {
							uni.hideToast();
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.getValue(res.data.id);
							uni.navigateBack();
						}, 1000);
					}
				});
			});
		},
		getDetail() {
			api.ownerDetail({ owner_id: this.owner_id }).then((res) => {
				this.form = res.data.info;
				this.form.owner_name = res.data.info.user_name;
				this.form.owner_mobile = res.data.info.user_mobile;
				this.form.id_card = res.data.info.id_card;
				for (let i = 0; i < this.monthway.length; i++) {
					if (res.data.info.pay_months == this.monthway[i].value) {
						this.pay_name = this.monthway[i].label;
					}
				}
			});
		},
		getRoomDetail() {
			api.roomDetail({ room_id: this.room_id }).then((res) => {
				this.room = res.data.info;
			});
		}
	}
};
</script>

<style lang="scss">
.topName {
	background: #fff;
	padding: 20rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #000;
	margin-bottom: 20rpx;
}
</style>
